@import url('../../utils/less/base.less');

.page {
    .overflow-hidden();

    &>.panel {
        .bgcolor(white);
        .radius(20rpx);
        margin: 32rpx;

        &>.header {
            .flex-between(center);
            padding: 20rpx;
            border-bottom: 2rpx solid #eee;

            &>.orderid {
                .text(#999);
            }

            &>.status {
                .text(#d2c206);
            }
        }

        &>.body {
            padding: 32rpx;

            &>.item {
                line-height: 1;

                &>.name {
                    .text(32rpx);
                }

                &>.doctor {
                    .flex-start(center);
                    border-bottom: 2rpx dashed #eeeeee;
                    padding: 20rpx 0;

                    &>.avatar {
                        .bgimg(cover, center);
                        .radius(50%);
                        .flex(none);
                        border: 2rpx solid #fdc91f;
                        width: 100rpx;
                        height: 100rpx;
                    }

                    &>.doctor-info {
                        margin-left: 20rpx;

                        &>.name {
                            .text(32rpx);
                        }

                        &>.specialty {
                            margin-top: 14rpx;
                        }
                    }
                }

                &>.patient {
                    .flex-between(center);
                    padding-top: 32rpx;

                    &>.person {}

                    &>.change {
                        .flex-start(center);
                        .text(#1296db);

                        &>.replace-icon {
                            margin-right: 8rpx;
                            display: block;
                            width: 36rpx;
                            height: 36rpx;
                        }
                    }
                }
            }
        }
    }

    &>.panel-check {
        .bgcolor(white);
        .radius(20rpx);
        margin: 32rpx;

        &>.title {
            .text(30rpx);
            padding: 20rpx;
            border-bottom: 2rpx solid #ddd;
        }

        &>.item {
            padding: 16rpx 0;
            margin: 0 32rpx;
            border-bottom: 2rpx dashed #ccc;
            &>.check-name {

            }
            &>.hospital-name {
                .flex-between(center);
                margin-top: 8rpx;
                &>.name {

                }
                &>.price {

                }
            }
        }
        &>.foot {
            .flex-end(center);
            padding: 32rpx;
        }
    }

    &>.patient {
        .bgcolor(white);
        .radius(20rpx);
        margin: 0 32rpx;
        &>.title {
            .text(30rpx);
            border-bottom: 2rpx solid #ddd;
            padding: 20rpx 32rpx;
        }
        &>.person {
            .flex-between(center);
            padding: 20rpx 32rpx;
            &>.person-info {

            }
            &>.replace {
                .flex-start(center);
                .text(#1296db);

                &>.replace-icon {
                    margin-right: 8rpx;
                    display: block;
                    width: 36rpx;
                    height: 36rpx;
                }
            }
        }
    }

    &>.pay {
        .fixed(bl, 0);
        .bgcolor(#ffa000);
        .text(white, 34rpx, center);
        height: 100rpx;
        line-height: 100rpx;
    }

    &>.placeholder {
        height: 100rpx;
    }

    & .popup {
        .bgcolor(white);

        &>.title {
            .text(center, 32rpx);
            line-height: 90rpx;
            box-shadow: 0 0 12rpx -6rpx #333;
        }

        &>.patient {
            .overflow-auto(y);
            max-height: 600rpx;
            padding: 0 32rpx;

            &>.item {
                .flex-between(center);
                margin: 20rpx 0;

                &>.info {
                    &>.name {
                        .text(32rpx);
                    }

                    &>.birthday {
                        .text(#999);
                    }
                }
            }

            &>.bottomline {
                .text(center, #999);
                margin: 30rpx 0;
            }
        }

        &>.jump {
            .text(center, 32rpx, #333);
            box-shadow: 0 0 12rpx -6rpx #333;
            line-height: 90rpx;
        }

        &>.add-patient {
            .text(center, 32rpx, #fff);
            .bgcolor(#16ad91);
            line-height: 90rpx;
        }
    }
}